import React, { useEffect, useState } from 'react';
import Http from '@/utils/NoLoginHttp';
//引入umi的路由事件
import { history } from 'umi';
//引入发送邮箱函数
import EmilUtils from '../store';
const { sendEmil } = EmilUtils;
//此处应该引入忘记密码的scss
import Style from '@/scss/miss.scss';
//显示标志默认常量
const ISSHOW = {
  EMIL: 'emil',
  SEND: 'send',
  CHANGEPWD: 'changepwd',
};
/*********************** 忘记密码入口组件  ************************************ */
//这是忘记密码组件
function Miss() {
  let [isShow, setIsShow] = useState(ISSHOW.EMIL); //显示标志状态,默认是输入邮箱
  //前面的emil类似vue的状态 后面的set是修改前面这个状态的方法
  let [emil, setEmil] = useState('');
  let [name, setName] = useState('');
  return (
    <div className={Style.miss}>
      <div className={Style.incenter}>
        {
          /** 这个三目运算符是根据isShow来判断调用哪个  可以在外部使用switch来返回代码可能更清晰,但是对你可能加重理解成本  */
          isShow == ISSHOW.EMIL ? (
            <UserNameInput setEmil={setEmil} name={name} setName={setName} setIsShow={setIsShow} />
          ) : (
            <Send emil={emil} setIsShow={setIsShow} />
          )
        }
      </div>
    </div>
  );
}
/************************** 子组件  ****************************** */

/*1. 邮箱输入组件  props就是在组件中传入遍历的合集   传入邮箱(因为其他子组件需要邮箱来渲染,所以在父组件声明)*/
function UserNameInput(props) {
  return (
    <div className={Style.Inputbox}>
      <div>
        <h1>忘记密码</h1>
      </div>
      <div>
        <h3>请输入要重置密码的账号</h3>
      </div>
      <div>
        <input
          type="text"
          value={props.emil}
          onChange={(e) => props.setName(e.target.value)}
          placeholder={'请输入账户'}
        />
      </div>
      <button onClick={() => { authEmil(props.name, props.setEmil, props.setIsShow) }}>下一步</button>
    </div>
  );
}


/**2. 发送验证码组件 */
function Send(props) {
  return (
    <div className={Style.Inputbox}>
      <div>
        <h1>请前往邮箱进行验证操作</h1>
      </div>
      <h3>已经给{props.emil}发送验证信息</h3>
      <button onClick={() => history.push('/')}>返回登陆</button>
    </div>
  );
}
/**************************  操作函数  ************************************** */
/**
 * 发送邮件
 * @param name 
 * @param setEmil 
 * @param setIsShow 
 * @returns 
 */
 let authEmil = async (name, setEmil, setIsShow) => {
  let params = { name };
  let result = await Http.post(`/getEM`, params);
  if (result.data.length == 0) { alert("该用户未注册"); return }
  //如果监测到邮箱
  setEmil(result.data[0].emil)
  if (result.data[0].emil) {
    //将校验码发送给指定邮箱,
    let res = await sendEmil(
      result.data[0].emil,
      '代办事件忘记密码操作',
      '如果不是本人操作请忽略',
      //此处QQ邮箱会强制让你下载QQ浏览器,否则不让你访问,甚是恶心,所以放上链接
      `请前往该地址进行密码修改: <a href="http://localhost:8000/changepwd?url=${result.data[0].uid}">前往设置新密码</a> 
      或者直接复制连接:http://localhost:8000/changepwd?url=${result.data[0].uid} ,进行访问修改`,
    );
    if (res.httpCode != 200) alert('请勿多次操作,请等待一会后重新发送');
  }

  setIsShow(ISSHOW.SEND)
}
export default Miss;
